<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .cm {
            width: 10cm;
        }
        .mm {
            width: 10mm;
        }
        .in {
            width: 10in;
        }
        .px {
            width: 10px;
        }
        .pt {
            width: 10pt;
        }
        .pc {
            width: 10pc;
        }
        .pct {
            width: 10%;
        }
        .em {
            width: 10em;
        }
        .ex {
            width: 10ex;
        }
        .ch {
            width: 10ch;
        }
        .rem {
            width: 10rem;
        }
        .vw {
            width: 10vw;
        }
        span {
            display: block;
            position: relative;
            font-weight: 300;
            background: tomato;
            margin: 0 0 10px 0;
            min-height: 40px;
        }
        label {
            position: absolute;
            right: -50px;
            font-family: 'Helvetica Neue';
            font-weight: 300;
            line-height: 40px;
            color: tomato;
        }
        h1 {
            color: tomato;
            font-family: 'Helvetica Neue', sans-serif;
            font-weight: 300;
        }
    </style>
</head>
<body>
<h1>CSS Size Value Comparison of 10</h1>

<span class="cm"> <label class="label">10cm  </label> </span>
<span class="mm"> <label class="label">10mm  </label> </span>
<span class="in"> <label class="label">10in  </label> </span>
<span class="px"> <label class="label">10px  </label> </span>
<span class="pt"> <label class="label">10pt  </label> </span>
<span class="pc"> <label class="label">10pc  </label> </span>

<span class="pct"><label class="label">10%   </label> </span>
<span class="em"> <label class="label">10em  </label> </span>
<span class="ex"> <label class="label">10ex  </label> </span>
<span class="ch"> <label class="label">10ch  </label> </span>
<span class="rem"><label class="label">10rem </label> </span>
<span class="vw"> <label class="label">10vw  </label> </span>
<!--<span class="vh"> <label class="label">10vh  </label> </span>  -->
</body>
</html>